<template>
    <el-dialog 
        :title="type=='add'?'新增字典':'编辑字典'" 
        :model-value="visible"
        :destroy-on-close="true"
        width="500px"
        :before-close="onCancel"
    >
        <el-form class="form form_height noScrollbar" ref="form"  :rules="rules" :model="form"  label-width="100px" label-position="right">
                <el-form-item label="字典值:" prop="value">
                    <el-input v-model="form.value" clearable placeholder="请输入字典值名称"></el-input>
                </el-form-item>
                <el-form-item label="字典类型名称:">
                    <el-input v-model="form.name" :disabled="true"></el-input>
                </el-form-item>
                <el-form-item label="字典类型编码:">
                    <el-input v-model="form.type" :disabled="true"></el-input>
                </el-form-item>
                <el-form-item label="编码:" prop="code">
                    <el-input v-model="form.code" clearable placeholder="请输入编码"></el-input>
                </el-form-item>
                <!-- <el-form-item  label="是否可编辑:">
                    <el-radio-group v-model="form.flag">
                        <el-radio-button :label="1">是</el-radio-button>
                        <el-radio-button :label="0">否</el-radio-button>
                        </el-radio-group>
                </el-form-item> -->
                <el-form-item label="字典排序:" prop="orderNum">
                    <el-input-number v-model="form.orderNum" :min="0" :max="1000" label="请输入排序"></el-input-number>
                </el-form-item>
                <el-form-item label="备注:" prop="remark">
                    <el-input v-model="form.remark" type="textarea" rows="6" maxlength="200" clearable placeholder="请输入备注"></el-input>
                </el-form-item>
            </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button type="primary" @click="onSubmit" :loading="loading">保 存</el-button>
                <el-button @click="onCancel">取 消</el-button>
            </span>
        </template>
    </el-dialog>
</template>
<script>
import abcApi from '@/api/dataDictionary'
export default {
    emits: ['onChange'],
    components:{
    },
    props:{
        visible:{
            default:false,
            type: Boolean
        },
        type:{
            default:'add',
            type: String
        },
        dicType:{
            default:()=>{
                return {}
            },
            type: Object
        },
        item:{
            default:()=>{
                return {}
            },
            type: Object
        }
    },
    data(){
        return {
            loading:false,
            form:{
                sort:0,
                flag:1,
            },
            rules:{
                
                value: [
                    { required: true, message: '请输入字典值', trigger: ['change','blur'], }
                ],
                
            },
            // 下拉数据
            comboList:[],
        }
    },
    watch:{
        visible(newValue){
            if(newValue){
                this.$nextTick(()=>{
                    this.$refs['form'].resetFields()
                })
                // 渲染字典类型
                this.form.name = this.dicType.name
                this.form.type = this.dicType.type
                
                
                if(this.type == 'edit'){
                    this.form=this.item;
                    // this.loading = true
                    // abcApi.getDictInfo({id: this.item.id})
                    // .then(res => {
                    //     this.loading = false
                    //     this.form = res.data
                    // }).catch((res)=>{
                    //     this.loading = false
                    // })
                }
            }else{
                this.$refs['form'].resetFields()
                Object.assign(this.$data,this.$options.data())
            }
        }
    },
    created(){
    },
    methods:{
        onSubmit(){
            this.$refs['form'].validate((valid) => {
                if (valid) {
                        this.loading = true
                        var api = this.type == 'add' ? abcApi.saveDict : abcApi.updateDict
                        api({
                            ...this.form,
                        }).then((res)=>{
                            this.loading = false
                            this.$emit('onChange',{bool:false,refresh:true})
                        }).catch((err)=>{
                            this.loading = false
                            this.$message.error(err.message||err.data.message)
                        })
                } else {
                    return false
                }
            })
        },
        onCancel(){
            this.$emit('onChange',{bool:false})
        }
    },
}
</script>
<style lang="scss" scoped>
    .form_height{
        max-height: 50vh;
        overflow-y: auto;
    }
    .width100{
        width: 100%;
    }
    ::v-deep.upload_box .el-upload-list__item-preview{
        display: none !important;
    }
    .img_box{
        display: flex;
        flex-wrap: wrap;
        &>div{
            width: 100px;
            height: 100px;
            margin-bottom: 10px;
            margin-right: 10px;
            border: 1px solid #DCDFE6;
            border-radius: 5px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
            &:hover{
                .delete_icon{
                    background-color: rgba(0,0,0,0.7);
                    display: flex;
                }
            }
            .delete_icon{
                display: none;
                justify-content: center;
                align-items: center;
                position: absolute;
                top: 0;
                right: 0;
                left: 0;
                bottom: 0;
                color: #fff;
                font-size: 20px;
            }
            img{
                width: 100%;
                height: 100%;
                object-fit: cover;
                
            }
        }
        
    }
</style>